<?xml version="1.0" encoding="utf-8"?>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="pt-br">
    <head>
        <title>jQuery Menu - Exemplos/Examples</title>
		    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
	<meta http-equiv="pragma" content="no-cache" />
	<meta http-equiv="cache-control" content="no-cache" />
	<meta http-equiv="expires" content="0" />    
	<meta http-equiv="keywords" content="struts2,jquery,plugin,showcase" />
	<meta http-equiv="description" content="A Showcase for the Struts2 jQuery Plugin" />
	<sj:head  compressed="false" jqueryui="true" jquerytheme="south-street" customBasepath="themes" locale="pt-BR" />
	<link href="styles/layout.css" rel="stylesheet" type="text/css" />
		
        <script src="jquery.js" type="text/javascript"></script>
		
		<!-- Chili the jQuery code highlighter plugin -->
        <script type="text/javascript" src="chili/chili.pack.js"></script>
        <script id="setup" type="text/javascript">
            ChiliBook.recipeFolder = "chili/";
            ChiliBook.stylesheetFolder = "chili/";
        </script>
        <script>
            $(function(){
                $("a:first", ".menuv li.submenu", ".menuh li.submenu").addClass("seta");
                
                $(".menuv li.submenu, .menuh li.subv").each(function(){
                    var el = $('#' + $(this).attr('id') + ' ul:eq(0)');
                    
                    $(this).hover(function(){
                        el.show();
                    }, function(){
                        el.hide();
                    });
                });
            });
        </script>
        <style>
            * {
                margin: 0; padding: 0;
            }            
			body {
                font-family: Tahoma; margin-bottom:20px; font-size: 11px; line-height:18px;
            }			
			.explain {
				text-align:center; font-weight:bold;
			}      
            h2 {
                font-size: 14px;
            }            
            p {
                padding: 5px 20px;
            }            
            pre {
                font-size: 11px; border: solid 1px #ccc; background: #f1f1f1; margin: auto;
            }            
			.demo, #menu {
				width: 90%; margin:auto;
			}
            
			/* menu styles */
			ul.menuh {
                margin: 0; padding: 0; border: 1px solid #000000; height: 28px;
            }            
            ul.menuh li.subv {
                margin: 0px; padding: 0px; width: 148px; float: left; list-style: none;
                border-right: 1px solid #000000;
            }            
            ul.menuh ul.menuv {
                display: none; position: absolute; margin-left: -1px;
            }            
            ul.menuh ul.menuv ul {
                left: 150px;
            }            
            ul.menuh a {
                padding: 5px; display: block; text-decoration: none; color: #000000;
            }            
            ul.menuh li a:hover {
                color: #fff; background-color: #009;
            }            
            ul.menuh a.seta {
                background: transparent url(indicador-submenu-1.gif) right center no-repeat;
            }            
            ul.menuv, ul.menuv ul {
                margin: 0; padding: 0; border: 0px; width: 150px; background-color: #fff;
                z-index: 10000; border-top: 1px solid #000000;
            }            
            ul.menuv li {
                position: relative; list-style: none; border: 0px;
            }            
            ul.menuv li a {
                display: block; text-decoration: none; border: 1px solid #000000; border-top: none;
                color: #000; padding: 5px 10px 5px 5px;
            }
            /* Fix IE. Hide from IE Mac \*/
            * html ul.menuv li {
                float: left; height: 1%;
            }            
            * ul.menuv li a {
                height: 1%;
            }
            /* End */
            ul.menuv ul {
                position: absolute; z-index: 10000; display: none; left: 149px; top: -1px;
            }            
            ul.menuv li.submenu ul {
                display: none;
            }            
            ul.menuv a.seta {
                background: transparent url(indicador-submenu-2.gif) right center no-repeat;
            }            
            ul.menuv li a:hover {
                color: #fff; background-color: #009;
            }
        </style>
    </head>
    <body>
    	<div class="demo">
		<h2>jQuery Menu Constructor - <a href="http://www.profissionaisti.com.br/wp-content/plugins/download-monitor/download.php?id=3">Download files here</a></h2>
	    <pre><code class="javascript">
			$(function(){
                $("a:first", ".menuv li.submenu", ".menuh li.submenu").addClass("seta");
                
                $(".menuv li.submenu, .menuh li.subv").each(function(){
                    var el = $('#' + $(this).attr('id') + ' ul:eq(0)');
                    
                    $(this).hover(function(){
                        el.show();
                    }, function(){
                        el.hide();
                    });
                });
            });
		</code></pre>
		</div>
		<br />
		<div id="menu">
	        <div id="menu-h">
	            <h2>Menu Horizontal</h2>
	            <ul class="menuh">
	                <li class="subv">
	                    <a href="#" onclick="location.href='?'">Menu 0</a>
	                </li>
	                <li id="submenu-1" class="subv">
	                    <a href="#" class="seta">Menu 1</a>
	                    <ul class="menuv">
	                        <li>
	                            <a href="#">Menu 1.1</a>
	                        </li>
	                    </ul>
	                </li>
	                <li id="submenu-2" class="subv">
	                    <a href="#" class="seta">Menu 2</a>
	                    <ul class="menuv">
	                        <li id="submenu-3" class="submenu">
	                            <a href="#">Menu 2.1</a>
	                            <ul class="menuv">
	                                <li id="submenu-4" class="submenu">
	                                    <a href="#">Menu 2.1.1</a>
	                                    <ul class="menuv">
	                                        <li id="submenu-5">
	                                            <a href="#">Menu 2.1.1.1</a>
	                                        </li>
	                                    </ul>
	                                </li>
	                            </ul>
	                        </li>
	                        <li id="submenu-6" class="submenu">
	                            <a href="#">Menu 3</a>
	                            <ul class="menuv">
	                                <li id="submenu-7">
	                                    <a href="#">Menu 3.1</a>
	                                </li>
	                                <li id="submenu-8" class="submenu">
	                                    <a href="#">Menu 3.1.1</a>
	                                    <ul class="menuv">
	                                        <li id="submenu-9" class="submenu">
	                                            <a href="#">Menu 3.1.1.1</a>
	                                            <ul class="menuv">
	                                                <li id="submenu-10">
	                                                    <a href="#">Menu 3.1.1.1.1</a>
	                                                </li>
	                                            </ul>
	                                        </li>
	                                    </ul>
	                                </li>
	                            </ul>
	                        </li>
	                    </ul>
	                </li>
	                <li id="submenu-11" class="subv">
	                    <a href="#" class="seta">Menu 4</a>
	                    <ul class="menuv">
	                        <li id="submenu-12">
	                            <a href="#">Menu 4.1</a>
	                        </li>
	                    </ul>
	                </li>
	                <li id="submenu-13" class="subv">
	                    <a href="#" class="seta">Menu 5</a>
	                    <ul class="menuv">
	                        <li id="submenu-14" class="submenu">
	                            <a href="#">Menu 5.1</a>
	                            <ul class="menuv">
	                                <li id="submenu-15">
	                                    <a href="#">Menu 5.1.1</a>
	                                </li>
	                            </ul>
	                        </li>
	                    </ul>
	                </li>
	            </ul>
	        </div>
	        <br/>
	        <div id="menu-v">
	            <h2>Menu Vertical</h2>
	            <ul class="menuv">
	                <li id="submenuv-1">
	                    <a href="#" onclick="location.href='?'">Menu 0</a>
	                </li>
	                <li id="submenuv-2">
	                    <a href="#">Menu 1</a>
	                </li>
	                <li id="submenuv-3" class="submenu">
	                    <a href="#" title="twetewtwe">Menu 1.1</a>
	                    <ul class="menuv">
	                        <li id="submenuv-4" class="submenu">
	                            <a href="#">Menu 1.1.1</a>
	                            <ul class="menuv">
	                                <li id="submenuv-5">
	                                    <a href="#">Menu 1.1.1.1</a>
	                                </li>
	                            </ul>
	                        </li>
	                    </ul>
	                </li>
	                <li id="submenuv-6" class="submenu">
	                    <a href="#1">Menu 2</a>
	                    <ul class="menuv">
	                        <li id="submenuv-7">
	                            <a href="#">Menu 2.1</a>
	                        </li>
	                    </ul>
	                </li>
	                <li id="submenuv-8">
	                    <a href="#">Menu 3</a>
	                </li>
	            </ul>
	        </div>
		</div>
    </body>
</html>